<template>
  <view class="app-container">
   <!-- <u-navbar :back-icon-color="'#EAEAE3'" :back-text="' '" :is-fixed="false" title="我的收藏"
      :back-text-style="{color:'#EAEAE3'}" :background="{}" title-color="#EAEAE3" :border-bottom="false" >
    </u-navbar> -->
    
    <empty v-if="loadingType != 'loading' && productList.length === 0"></empty>
    <view class="goods-list" v-if="productList.length > 0">
      <view v-for="(item, index) in productList" :key="index" class="goods-item" @click="navToDetailPage(item)">
        <image :src="item.spuImage" class="thumb"></image>
        <view class="goods-data">
          <view class="title">{{ item.spuName }}</view>
          <view class="bottom-row">
            <text class="price">￥{{ item.price }}</text>
            <!-- <text class="time">收藏时间 {{ item.createTime }}</text> -->
			<image @click.prevent.stop="handleCollect" :data-index="index" class="collect-icon" mode="aspectFit" :src="item.collected ? '../../../static/image/collected.png' : '../../../static/image/collect-add.png'"></image>
          </view>
        </view>
      </view>

      <uni-load-more :status="loadingType"></uni-load-more>

    </view>
  </view>
</template>

<script>
  import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  import empty from "@/components/empty";
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    components: {
      uniLoadMore,
      empty
    },
    data() {
      return {
        productList: [],
        loadingType: 'loading'
      };
    },
    onLoad(options) {
      this.inquiryFavorite();
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo'])
    },
    methods: {
      ...mapMutations(['login']),
      //查询收藏的商品
      inquiryFavorite() {
        this.$api.request.collectedSkuList(res => {
		  res.data.forEach(e => {
			  e['collected'] = true
		  })
          this.productList = res.data;
          this.loadingType = 'noMore';
        });
      },
      //详情
      navToDetailPage(item) {
        uni.navigateTo({
          url: '/pages/sys/home/product?id=' + item.skuId
        })
      },
	  handleCollect(e) {
		  const index = e.currentTarget.dataset.index
		  this.$api.request.skuCollect({
		  	skuId: this.productList[index].skuId,
		  	spuId: this.productList[index].spuId,
		  	spuName: this.productList[index].spuName,
		  	spuImage: this.productList[index].spuImage,
		  	price: this.productList[index].price
		  }, res => {
			this.productList[index].collected = !this.productList[index].collected
		  	this.$u.toast(res.message);
		  })
	  }
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
	background-color: #F7F8FA;
    color: #2A2A2A;
    min-height: 100vh;

    /* 商品列表 */
    .goods-list {
      padding: 24rpx;

      .goods-item {
        padding: 24rpx;
        display: flex;
        margin-bottom: 24rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
		.thumb{
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
		.goods-data{
			flex: 1;
			overflow: hidden;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
		}
        .title {
          line-height: 36rpx;
        }

        .bottom-row {
          display: flex;
		  justify-content: space-between;
		  align-items: center;
          font-size: 26rpx;
          margin-top: 10rpx;
          line-height: 30rpx;

          .price {
            flex: 2;
            color: #009B65;
          }

          .time {
            flex: 7;
            text-align: right;
          }
		  .collect-icon{
			  width: 40rpx;
			  height: 40rpx;
			  display: block;
		  }
        }
      }
    }
  }
</style>
